<include file="public@header"/>

<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:url('Classroom/index')}">教室列表</a></li>
        <li class="active"><a href="{:url('Classroom/add')}">教室添加</a></li>
    </ul>
    <div class="row margin-top-20">
        <div class="col-md-12 col-lg-10">
            <form action="{:url('Classroom/addPost')}" method="post" class="form-horizontal js-ajax-form margin-top-20">
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-bordered chase_classroom_table">
                            <tr>
                                <th>校区<span class="form-required">*</span></th>
                                <td>
                                    <select class="form-control" name="school_id" id="input-parent" style="width: 180px;">
                                        <option value='0'>全部</option>
                                        <notempty name="campus">
                                            <volist name="campus" id="vo">
                                                <if condition="isset($param.school_id) && $param.school_id == $vo.id">
                                                    <option value="{$vo.id}" selected>{$vo.name}</option>
                                                    <else/>
                                                    <option value="{$vo.id}">{$vo.name}</option>
                                                </if>
                                            </volist>
                                        </notempty>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th>教室名称<span class="form-required">*</span></th>
                                <td>
                                    <input type="text" class="form-control"  id="input-name" name="name" value="">
                                </td>
                            </tr>
                            <!--<tr>-->
                                <!--<th>排序</th>-->
                                <!--<td>-->
                                    <!--<input type="number" class="form-control" min="1" name="list_order" placeholder="数字越大越优先" value="">-->
                                <!--</td>-->
                            <!--</tr>-->
                            <tr>
                                <th>可容纳学生数</th>
                                <td>
                                    <input type="number" id="counter" class="form-control" name="student_nums" value="" readonly>
                                </td>
                            </tr>
                            <tr>
                                <th>教室模板<span class="form-required">*</span></th>
                                <td>
                                    <div class="demo">
                                          <div id="seat-map" class="col-md-9">
                                                <div class="front">黑板</div>
                                          </div>
                                          <div class="booking-details col-md-3">
                                              <div>
                                                  <label for="row">
                                                      排：<span class="form-required">*</span><input type="number" name="rows" id="row" min="1" value="">
                                                  </label>
                                                  <label for="column">
                                                      列：<span class="form-required">*</span><input type="number" name="cols" id="column" min="1" value="">
                                                  </label>
                                              </div>

                                              <div>
                                                  <button type='button' class="set btn btn-primary" id="generate">生成座位</button>
                                                  <button type='button' class="setparents btn btn-primary" id="set_parents">设为家长座位</button>
                                                  <button type='button' class="setaisles btn btn-primary" id="set_aisles">设为过道</button>
                                                  <button type='button' class="reset btn btn-primary" id="re_generate">重新生成座位</button>
                                              </div>

                                              <div id="legend"></div>
                                          </div>
                                          <div style="clear:both"></div>
                                    </div>
                                    <br/>
                                </td>
                            </tr>
                        </table>
                        <input type="hidden" name="vip" id="vip" value="">
                        <input type="hidden" name="aisle" id="aisle" value="">

                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('ADD')}</button>
                                <a class="btn btn-default" href="{:url('Classroom/index')}">{:lang('BACK')}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>
<!--ajax layer 弹窗-->
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>

<script src="__STATIC__/js/jquery.seat-charts.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        //生成座位button
        $("#generate").click(function(){
            var $row = parseInt($('#row').val());
            var $column = parseInt($('#column').val());
            if(!$row || !$column){
                alert("请输入排数和列数");
                return false;
            }
            //设置黑板样式和
            $('.front').css('width',61*$column+58+'px');

            // if ($column>11){
            //   $('#column').val('').attr('placeholder',"请输入11列及以内");
            //   return false;
            // }
            //班级总人数
            $counter = $row * $column;
            $('#counter').val($counter);
            new_map = [];

            //根据行列初步生成座位表的map
            for(var i=0;i<$row;i++){
                new_map[i]='';
                for (var j=0;j<$column;j++){
                    new_map[i] +='a';
                }
            }

            //生成座位表
            setseat();

            //行列生成后生成座位变为不可编辑
            $(this).attr('disabled','true');
            $('#row').val($row);
            $('#column').val($column);
            $('#row').attr("readonly","readonly");
            $('#column').attr("readonly","readonly");
            return false;
        });


        //重新生成座位button;
        $("#re_generate").click(function(){
            //移除原对象，生成带黑板的新对象；
            $('#seat-map').remove();
            var blackboard = $('<div/>').addClass('front').text('黑板');
            var seatmap = $('<div/>').attr('id','seat-map').prepend(blackboard).addClass('col-md-9');
            $('.demo').prepend(seatmap);


            $('#generate').removeAttr('disabled');
            $('#row').removeAttr('readonly').val('');
            $('#column').removeAttr('readonly').val('');
            $('#legend').empty();
            $('#counter').val('');
            return false;
        });

        //设置家长座位button
        $("#set_parents").click(function(){
            $counter = $counter - sc.find('selected').length;
            sc.get(sc.find('selected').seatIds).status('parentseats');
            $('#vip').val(sc.find('parentseats').seatIds);
        });

        //设置过道
        $("#set_aisles").click(function(){
            $counter = $counter - sc.find('selected').length;
            sc.get(sc.find('selected').seatIds).status('aisles');
            $('#aisle').val(sc.find('aisles').seatIds);
        });

        // //确定教室座位
        // $('#confirm').click(function () {
        //     //家长座位
        //     $('#vip').val(sc.find('parentseats').seatIds);
        //     //过道
        //     $('#aisle').val(sc.find('aisles').seatIds);
        // });

    });


    function setseat(){
        var $cart = $('#selected-seats');//座位区
        sc = $('#seat-map').seatCharts({
            map: new_map,
            naming : {
                top : true,
                getLabel : function (character, row, column) {
                    return column;
                }
            },
            legend : { //定义图例
                node : $('#legend'),
                items : [
                    [ 'a', 'available',   '可选座' ],
                    // [ 'a', 'unavailable', '已选座位'],
                    [ 'a', 'aisles', '过道'],
                    [ 'a', 'parentseats','家长座位']
                ]
            },
            click: function () { //点击事件
                if (this.status() == 'available') { //可选座
                    $('<li>'+(this.settings.row+1)+'排'+this.settings.label+'座</li>')
                        .attr('id', 'cart-item-'+this.settings.id)
                        .data('seatId', this.settings.id)
                        .appendTo($cart);
                    $('#counter').val($counter-sc.find('selected').length-1);
                    // $counter.text(sc.find('selected').length+1);
                    // $total.text(recalculateTotal(sc)+price);

                    return 'selected';
                } else if (this.status() == 'selected') { //已选中
                    //更新数量
                    $('#counter').val($counter-sc.find('selected').length+1);
                    //更新总计
                    // $total.text(recalculateTotal(sc)-price);
                    //删除已预订座位
                    $('#cart-item-'+this.settings.id).remove();

                    //可选座
                    return 'available';
                } else if (this.status() == 'unavailable') { //已售出
                    return 'unavailable';
                } else {
                    return this.style();
                }
            }
        });
        //已售出的座位
        // sc.get(['1_2', '4_4','4_5','6_6','6_7','8_5','8_6','8_7','8_8', '10_1', '10_2']).status('unavailable');
        set_column();

        //   设置列数为字母
        function set_column() {
            var obj=$('.seatCharts-header>.seatCharts-cell:not(:first)');
            var length=obj.length;
            for (var i=0;i<length;i++){
                if(obj[i].innerHTML>26){
                    console.log('超出最大列数Z(26)');
                    return false;
                }else{
                    obj[i].innerHTML=String.fromCharCode(parseInt(obj[i].innerHTML)+64);
                }
            }
        }
    }

</script>

</body>
